<template>
	<div class="daily">
		<div class="daily-menu">
			<div class="daily-menu__item">每日推荐</div>
			<div class="daily-menu__item" @click="showThemes = !showThemes">主题日报</div>
			<ul v-show="showThemes">
				<li>
					<a href="#">主题日报Item</a>
				</li>
			</ul>
		</div>
		<div class="daily-list">
			<Item></Item>
		</div>
		<daily-article></daily-article>
	</div>
</template>

<script>
import Item from '@/components/item.vue';
import dailyArticle from '@/components/daily-article.vue';
export default {
	name: "APP",
	components: {
		Item,
		dailyArticle
	},
	data () {
		return {
			showThemes: false
		}
	},
	methods: {
		getThemes () {
			this.$http.get('themes').then(function (response) {
				console.log(response);
			})
		}
	},
	mounted () {
		this.getThemes();
	}
}
</script>
<style lang="scss">
	html, body{
		margin: 0;
		padding: 0;
		height: 100%;
		color: #657180;
		font-size: 16px;
	}
</style>
<style lang="scss" scoped>
	.daily-menu{
		width: 150px;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		overflow: auto;
		background: #f5f7f9;
		&__item{
			font-size: 18px;
			text-align: center;
			margin: 5px 0;
			padding: 10px 0;
			cursor: pointer;
			border-right: 2px solid transparent;
			transition: all .3s ease-in-out;
			&:hover{
				background: #e3e8ee;
			}
			.on{
				border-right: 2px solid #3399ff;
			}
		}
		ul{
			list-style: none;
			li {
				a {
					display: block;
					color: inherit;
					text-decoration: none;
					padding: 5px 0;
					margin: 5px 0;
					cursor: pointer;
					&:hover, ul li a.on{
						color: #3399ff;
					}
				}
			}
		}
	}
	.daily-list{
		width: 300px;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 150px;
		overflow: auto;
		border-right: 1px solid #d7dde4;
	}
	.daily-article{
		margin-left: 450px;
		padding: 20px;
		&__title{
			font-size: 28px;
			font-weight: bold;
			color: #222;
			padding: 10px 0;
		}
	}
</style>